<template>
	<div class="home_container">
		<!-- 导航栏 -->
		<van-nav-bar class="app-search-bar">
			<template v-slot:title>
				<van-button
				 round 
				 type="info"
				 size="small"
				 icon="search"
				 class="search-btn"
				 to='/search'
				 >搜索</van-button>
			</template>
		</van-nav-bar>
		<!-- 标签页组件 -->
		<van-tabs v-model="active" v-if="channels.length" swipeable>
		  <van-tab :title="item.name" v-for="item in channels" :key="item.id">
			<article-list  :channel="item"></article-list>
		  </van-tab>
		  <!-- 占位用的 -->
		  <div slot="nav-right" style="width:33px;flex-shrink:0"></div>
		  <div slot="nav-right" @click="ischangelEditShow = true" class="wap-nav-wrap">
			  <van-icon name="wap-nav"></van-icon>
		  </div>
		</van-tabs>
		<!-- 文章频道列表 -->
		<!-- 通过get-container挂载到全局body上 -->
		<van-popup
			v-model="ischangelEditShow"
			position="bottom"
			style="height:100%"
			closeable
			close-icon-position="top-left"
			get-container="body"
		>
			<channel-edit 
				:userChannels="channels"
				@channelSelected="active = $event"
				:isActived="active"
				@close="ischangelEditShow=false"
			/>
		</van-popup>

	</div>
</template>

<script>
	import {getUserChannels} from '@/api/user.js'
	import {mapState} from 'vuex'
	import {getItem} from '@/utils/storage.js'
	import articleList from './homeCmp/articleList.vue'
	import channelEdit from './homeCmp/channelEdit.vue'
	export default {
		name:'home',
		data(){
			return {
				active: 0,
				channels:[],
				ischangelEditShow:false
			}
		},
		created(){
			// 获取用户频道
			this._getUserChannels()
		},
		components:{
			articleList,
			channelEdit
		},
		methods:{
			async _getUserChannels(){
				let channels = []
				if(this.user){
					const {data} = await getUserChannels()
					channels = data.data.channels
				}else{
					let localUserChannels = getItem('localChannels')
					
					if(localUserChannels){
						
						channels = localUserChannels
						
					}else{
						const {data} = await getUserChannels()
						channels = data.data.channels
					}
				}
				
				
				this.channels = channels
			}
		},
		computed:{
			...mapState(['user'])
		}
	}
</script>

<style scoped lang="less">
	.home_container{
		
	 /deep/ .van-nav-bar{
			background-color: unset;
			background-color:#3296fa;
			.van-nav-bar__title{
				max-width: none;
			}
		}
		.app-search-bar{
			.search-btn{
				width: 277px;
				height: 32px;
				background: #5babfb;
				border: none;
				.van-icon{
					font-size:16px;
					color:#fff;
				}
				.van-button__text{
					font-size: 14px;
					color:#3296fa;
				}
			}
		}
		.wap-nav-wrap{
			position:fixed;
			right:0;
			height:44px;
			line-height: 44px;
			background-color:#fff;
			opacity:0.9;
			width:33px;
			font-size:24px;
			display:flex;
			justify-content:center;
			align-items:center;
			&::before{
				display:block;
				position:absolute;
				content:'';
				width:1px;
				height:33px;
				left:0;
				top:5px;
				background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5),rgba(0,0,0,0));
			}
		}
	}
</style>